<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录t</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
       <div class="container">
          <!-- 短信登录/注册 密码登录 -->
          <div class="login">
            <!-- 切换菜单 -->
            <div class="switch-menu clearfix">
                <span class="left selected">
                    短信登录/注册
                </span>
                <span class="right">
                    密码登录
                </span>
            </div>

            <form  class="form">
                <!-- 短信登录/注册表单 -->
              <div class="hidden">
                <div class="form-item">
                        <p class="txt">
                            请仔细阅读 
                            <a href="">豆瓣使用协议、豆瓣个人信息保护政策</a>
                        </p>
                </div>
                <div class="form-item">
                    <!-- <div class="cuontry-code">
                          <div class="selected">
                              +86
                          </div>
                          <div class="codes ">
                              <div class="center hidden">
                                  <div class="title">
                                      选择国际区号
                                  </div>
<div>                                
<ul>
	<li class="contry clearfix selected">
        <span class="left">国家名1</span>
        <span class="left iconfont icon-gougou"></span>
        <span class="righ">+1</span>
    </li>
	<li class="contry clearfix"><span class="left">国家名2</span><span class="righ">+2</span></li>
	<li class="contry clearfix"><span class="left">国家名3</span><span class="righ">+3</span></li>
	<li class="contry clearfix"><span class="left">国家名4</span><span class="righ">+445245</span></li>
	<li class=" contry clearfix"><span class="left">国家名5</span><span class="righ">+5</span></li>
	<li class="contry clearfix"><span class="left">国家名6</span><span class="righ">+6</span></li>
	<li class="contry clearfix"><span class="left">国家名7</span><span class="righ">+7</span></li>
	<li class="contry clearfix"><span class="left">国家名8</span><span class="righ">+8</span></li>
	<li class="contryclearfix"><span class="left">国家名9</span><span class="righ">+9</span></li>
	<li class="contry clearfix"><span class="left">国家名10</span><span class="righ">+10</span></li>
	<li class="contry clearfix"><span class="left">国家名11</span><span class="righ">+11</span></li>
	<li class="contry clearfix"><span class="left">国家名12</span><span class="righ">+12</span></li>
	<li class="contry clearfix"><span class="left">国家名13</span><span class="righ">+13</span></li>
	<li class="contry clearfix"><span class="left">国家名14</span><span class="righ">+14</span></li>
	<li class="contry clearfix"><span class="left">国家名15</span><span class="righ">+15</span></li>
	<li class="contry clearfix"><span class="left">国家名16</span><span class="righ">+16</span></li>
	<li class="contry clearfix"><span class="left">国家名17</span><span class="righ">+17</span></li>
	<li class="contry clearfix"><span class="left">国家名18</span><span class="righ">+18</span></li>
	<li class="contry clearfix"><span class="left">国家名19</span><span class="righ">+19</span></li>
	<li class="contry clearfix"><span class="left">国家名20</span><span class="righ">+20</span></li>
	<li class="contry clearfix"><span class="left">国家名21</span><span class="righ">+21</span></li>
	<li class="contry clearfix"><span class="left">国家名22</span><span class="righ">+22</span></li>
	<li class="contry clearfix"><span class="left">国家名23</span><span class="righ">+23</span></li>
	<li class="contry clearfix"><span class="left">国家名24</span><span class="righ">+24</span></li>
	<li class="contry clearfix"><span class="left">国家名25</span><span class="righ">+25</span></li>
	<li class="contry clearfix"><span class="left">国家名26</span><span class="righ">+26</span></li>
	<li class="contry clearfix"><span class="left">国家名27</span><span class="righ">+27</span></li>
	<li class="contry clearfix"><span class="left">国家名28</span><span class="righ">+28</span></li>
	<li class="contry clearfix"><span class="left">国家名29</span><span class="righ">+29</span></li>
	<li class="contry clearfix"><span class="left">国家名30</span><span class="righ">+30</span></li>
	<li class="contry clearfix"><span class="left">国家名31</span><span class="righ">+31</span></li>
	<li class="contry clearfix"><span class="left">国家名32</span><span class="righ">+32</span></li>
	<li class="contry clearfix"><span class="left">国家名33</span><span class="righ">+33</span></li>
	<li class="contry clearfix"><span class="left">国家名34</span><span class="righ">+34</span></li>
	<li class="contry clearfix"><span class="left">国家名35</span><span class="righ">+35</span></li>
	<li class="contry clearfix"><span class="left">国家名36</span><span class="righ">+36</span></li>
	<li class="contry clearfix"><span class="left">国家名37</span><span class="righ">+37</span></li>
	<li class="contry clearfix"><span class="left">国家名38</span><span class="righ">+38</span></li>
	<li class="contry clearfix"><span class="left">国家名39</span><span class="righ">+39</span></li>
	<li class="contry clearfix"><span class="left">国家名40</span><span class="righ">+40</span></li>
</ul>
</div> 
                                  <div>
                                    <a href="" class="caca">×</a>
                                  </div>
                              </div>
                          </div>
                    </div> -->
                     <input type="text" class="text-indent" placeholder="手机号">
                </div> 
                <div class="form-item">
                      <input type="text" placeholder="验证码" >
                      <div class="item">
                          <a href="">获取验证码</a>
                      </div>
                </div> 
                <div class="form-item">
                    <div class="cent">
                       <a href="" class="link">登录豆瓣</a>
                    </div>
                    <div class="right clearfix">
                        <label for="" class="left">
                            <input type="checkbox">
                            下次自动登录
                        </label>
                       <a class="link-item" >收不到验证码</a>
                    </div>
                </div>
             </div>
                <!-- 密码登录 -->
                <div class="form-item-tip clearfix">
                      <a href="" class="right">找回密码</a>
                </div>
                <div class="form-item">
                    <input type="text" class="" placeholder="手机号/邮箱">
                </div>
                <div class="form-item">
                    <input type="password" placeholder="密码" >
                </div>
                <div class="form-item">
                    <div class="cent">
                       <a href="" class="link">登录豆瓣</a>
                    </div>
                    <div class="right clearfix">
                        <label for="" class="left">
                            <input type="checkbox">
                            下次自动登录
                        </label>
                       <a class="link-item" >海外手机登录</a>
                    </div>
                </div>              
            </form>
            <div class="button">
                <span class="wenz">第三方登录：</span>
                <div class="img">
                     <i class="iconfont icon-weixin"></i>
                     <i class="iconfont icon-weibo"></i>
                </div>
            </div>
          </div>
          <!-- 扫码登录 -->
        <div class="hidden">
          <div class="tittle">
             二维码登录
          </div>
          <div class="code">
            <img src="img/LOsuJMpiq6w.png" alt="">
          </div>
          <div class="tip">
             请打开豆瓣 App 扫一扫 或
             <a href="link">短信登录验证</a>
          </div>
        </div>
        
          <div class="chang">
            <!-- 通过切换图标 -->
              <!-- <i class="icon icon-gi"></i> -->
              <i class="icon icon-gig"></i>
          </div>
          <div class="position hidden">
              扫码登录
          </div>
       </div>
</body> 
</html>